<template>
  <view class="login-page">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="floating-shapes">
        <view class="shape shape-1"></view>
        <view class="shape shape-2"></view>
        <view class="shape shape-3"></view>
        <view class="shape shape-4"></view>
        <view class="shape shape-5"></view>
      </view>
      <view class="gradient-overlay"></view>
    </view>

    <!-- 主内容区域 -->
    <scroll-view scroll-y class="content-scroll">
      <view class="login-content">
        <!-- 应用Logo和标题 -->
        <view class="app-branding">
          <view class="logo-container">
            <view class="app-logo">
              <text class="iconfont icon-rocket"></text>
            </view>
            <view class="logo-rings">
              <view class="ring ring-1"></view>
              <view class="ring ring-2"></view>
            </view>
          </view>
          <text class="app-title">激励追踪</text>
          <text class="app-subtitle">让每一天都充满动力</text>
        </view>

        <!-- 登录表单区域 -->
        <view class="login-form-section">
          <!-- 切换标签 -->
          <view class="auth-tabs">
            <button class="auth-tab" :class="{ active: currentTab === 'login' }" @tap="switchTab('login')">
              <text>登录</text>
            </button>
            <button class="auth-tab" :class="{ active: currentTab === 'register' }" @tap="switchTab('register')">
              <text>注册</text>
            </button>
            <view class="tab-indicator" :class="{ 'move-right': currentTab === 'register' }"></view>
          </view>

          <!-- 登录表单 -->
          <view v-show="currentTab === 'login'" class="auth-form">
            <view class="form-group">
              <view class="input-wrapper" :class="{ focused: focusedField === 'loginEmail' }">
                <view class="input-icon">
                  <text class="iconfont icon-email"></text>
                </view>
                <input v-model="loginForm.email" type="text" placeholder="邮箱地址" class="form-input"
                  @focus="focusedField = 'loginEmail'" @blur="focusedField = ''" />
                <view class="input-focus-line"></view>
              </view>
            </view>

            <view class="form-group">
              <view class="input-wrapper" :class="{ focused: focusedField === 'loginPassword' }">
                <view class="input-icon">
                  <text class="iconfont icon-lock"></text>
                </view>
                <input v-model="loginForm.password" :type="showLoginPassword ? 'text' : 'password'" placeholder="密码"
                  class="form-input" @focus="focusedField = 'loginPassword'" @blur="focusedField = ''" />
                <button class="password-toggle" @tap="showLoginPassword = !showLoginPassword">
                  <text class="iconfont" :class="showLoginPassword ? 'icon-eye-slash' : 'icon-eye'"></text>
                </button>
                <view class="input-focus-line"></view>
              </view>
            </view>

            <view class="form-options">
              <label class="remember-me" @tap="loginForm.remember = !loginForm.remember">
                <view class="checkbox" :class="{ checked: loginForm.remember }">
                  <text v-if="loginForm.remember" class="checkmark">✓</text>
                </view>
                <text class="label-text">记住我</text>
              </label>
              <text class="forgot-password" @tap="handleForgotPassword">忘记密码？</text>
            </view>

            <button class="auth-button primary" :class="{ loading: isLoading }" @tap="handleLogin">
              <text v-show="!isLoading" class="button-text">登录</text>
              <view v-show="isLoading" class="button-loader">
                <view class="spinner"></view>
              </view>
            </button>
          </view>

          <!-- 注册表单 -->
          <view v-show="currentTab === 'register'" class="auth-form">
            <view class="form-group">
              <view class="input-wrapper" :class="{ focused: focusedField === 'registerName' }">
                <view class="input-icon">
                  <text class="iconfont icon-user"></text>
                </view>
                <input v-model="registerForm.name" type="text" placeholder="用户名" class="form-input"
                  @focus="focusedField = 'registerName'" @blur="focusedField = ''" />
                <view class="input-focus-line"></view>
              </view>
            </view>

            <view class="form-group">
              <view class="input-wrapper" :class="{ focused: focusedField === 'registerEmail' }">
                <view class="input-icon">
                  <text class="iconfont icon-email"></text>
                </view>
                <input v-model="registerForm.email" type="text" placeholder="邮箱地址" class="form-input"
                  @focus="focusedField = 'registerEmail'" @blur="focusedField = ''" />
                <view class="input-focus-line"></view>
              </view>
            </view>

            <view class="form-group">
              <view class="input-wrapper" :class="{ focused: focusedField === 'registerPassword' }">
                <view class="input-icon">
                  <text class="iconfont icon-lock"></text>
                </view>
                <input v-model="registerForm.password" :type="showRegisterPassword ? 'text' : 'password'"
                  placeholder="密码" class="form-input" @focus="focusedField = 'registerPassword'"
                  @blur="focusedField = ''" />
                <button class="password-toggle" @tap="showRegisterPassword = !showRegisterPassword">
                  <text class="iconfont" :class="showRegisterPassword ? 'icon-eye-slash' : 'icon-eye'"></text>
                </button>
                <view class="input-focus-line"></view>
              </view>
            </view>

            <view class="form-group">
              <view class="input-wrapper" :class="{ focused: focusedField === 'confirmPassword' }">
                <view class="input-icon">
                  <text class="iconfont icon-lock"></text>
                </view>
                <input v-model="registerForm.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'"
                  placeholder="确认密码" class="form-input" @focus="focusedField = 'confirmPassword'"
                  @blur="focusedField = ''" />
                <button class="password-toggle" @tap="showConfirmPassword = !showConfirmPassword">
                  <text class="iconfont" :class="showConfirmPassword ? 'icon-eye-slash' : 'icon-eye'"></text>
                </button>
                <view class="input-focus-line"></view>
              </view>
            </view>

            <view class="form-options">
              <label class="agree-terms" @tap="registerForm.agreeTerms = !registerForm.agreeTerms">
                <view class="checkbox" :class="{ checked: registerForm.agreeTerms }">
                  <text v-if="registerForm.agreeTerms" class="checkmark">✓</text>
                </view>
                <text class="label-text">
                  我同意 <text class="link-text" @tap.stop="openTerms">用户协议</text> 和 <text class="link-text"
                    @tap.stop="openPrivacy">隐私政策</text>
                </text>
              </label>
            </view>

            <button class="auth-button primary" :class="{ loading: isLoading }" @tap="handleRegister">
              <text v-show="!isLoading" class="button-text">注册</text>
              <view v-show="isLoading" class="button-loader">
                <view class="spinner"></view>
              </view>
            </button>
          </view>
        </view>

        <!-- 分割线 -->
        <view class="divider">
          <text>或者</text>
        </view>

        <!-- 第三方登录 -->
        <view class="social-login">
          <button class="social-button wechat" @tap="handleWechatLogin">
            <view class="social-icon">
              <text class="iconfont icon-wechat"></text>
            </view>
            <text>微信登录</text>
          </button>

          <button class="social-button qq" @tap="handleQQLogin">
            <view class="social-icon">
              <text class="iconfont icon-qq"></text>
            </view>
            <text>QQ登录</text>
          </button>

          <button class="social-button apple" @tap="handleAppleLogin">
            <view class="social-icon">
              <text class="iconfont icon-apple"></text>
            </view>
            <text>Apple ID</text>
          </button>
        </view>

        <!-- 快速体验 -->
        <view class="quick-actions">
          <button class="quick-experience" @tap="handleGuestLogin">
            <text class="iconfont icon-play"></text>
            <text>游客体验</text>
          </button>
        </view>

        <!-- 页脚信息 -->
        <view class="auth-footer">
          <text class="version-info">版本 1.0.0</text>
          <view class="footer-links">
            <text class="link-text" @tap="openHelp">帮助中心</text>
            <text class="separator">·</text>
            <text class="link-text" @tap="openContact">联系我们</text>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 欢迎动画遮罩 -->
    <view v-show="showWelcome" class="welcome-overlay">
      <view class="welcome-content">
        <view class="welcome-logo">
          <text class="iconfont icon-rocket"></text>
        </view>
        <text class="welcome-title">欢迎回来！</text>
        <text class="welcome-subtitle">正在为您准备个人数据...</text>
        <view class="welcome-progress">
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: progress + '%' }"></view>
          </view>
          <text class="progress-text">{{ progress }}%</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 响应式数据
const currentTab = ref<'login' | 'register'>('login')
const focusedField = ref('')
const isLoading = ref(false)
const showWelcome = ref(false)
const progress = ref(0)

// 密码显示控制
const showLoginPassword = ref(false)
const showRegisterPassword = ref(false)
const showConfirmPassword = ref(false)

// 表单数据
const loginForm = reactive({
  email: '',
  password: '',
  remember: false
})

const registerForm = reactive({
  name: '',
  email: '',
  password: '',
  confirmPassword: '',
  agreeTerms: false
})

// 切换标签页
const switchTab = (tab: 'login' | 'register') => {
  currentTab.value = tab
  focusedField.value = ''
}

// 表单验证
const validateEmail = (email: string): boolean => {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

const validatePassword = (password: string): boolean => {
  return password.length >= 6
}

// 登录处理
const handleLogin = async () => {
  if (!loginForm.email.trim()) {
    uni.showToast({
      title: '请输入邮箱地址',
      icon: 'none'
    })
    return
  }

  if (!validateEmail(loginForm.email)) {
    uni.showToast({
      title: '请输入有效的邮箱地址',
      icon: 'none'
    })
    return
  }

  if (!loginForm.password.trim()) {
    uni.showToast({
      title: '请输入密码',
      icon: 'none'
    })
    return
  }

  isLoading.value = true

  try {
    // 模拟登录API调用
    await new Promise(resolve => setTimeout(resolve, 2000))

    // 显示欢迎动画
    showWelcomeAnimation()

    // 登录成功后跳转
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 3000)

  } catch (error) {
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请稍后重试',
      icon: 'none'
    })
  } finally {
    isLoading.value = false
  }
}

// 注册处理
const handleRegister = async () => {
  if (!registerForm.name.trim()) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'none'
    })
    return
  }

  if (!registerForm.email.trim()) {
    uni.showToast({
      title: '请输入邮箱地址',
      icon: 'none'
    })
    return
  }

  if (!validateEmail(registerForm.email)) {
    uni.showToast({
      title: '请输入有效的邮箱地址',
      icon: 'none'
    })
    return
  }

  if (!validatePassword(registerForm.password)) {
    uni.showToast({
      title: '密码长度不能少于6位',
      icon: 'none'
    })
    return
  }

  if (registerForm.password !== registerForm.confirmPassword) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none'
    })
    return
  }

  if (!registerForm.agreeTerms) {
    uni.showToast({
      title: '请先同意用户协议和隐私政策',
      icon: 'none'
    })
    return
  }

  isLoading.value = true

  try {
    // 模拟注册API调用
    await new Promise(resolve => setTimeout(resolve, 2000))

    uni.showToast({
      title: '注册成功！',
      icon: 'success'
    })

    // 注册成功后自动切换到登录
    setTimeout(() => {
      currentTab.value = 'login'
      loginForm.email = registerForm.email
    }, 1500)

  } catch (error) {
    console.error('注册失败:', error)
    uni.showToast({
      title: '注册失败，请稍后重试',
      icon: 'none'
    })
  } finally {
    isLoading.value = false
  }
}

// 第三方登录
const handleWechatLogin = () => {
  uni.showToast({
    title: '微信登录功能开发中',
    icon: 'none'
  })
}

const handleQQLogin = () => {
  uni.showToast({
    title: 'QQ登录功能开发中',
    icon: 'none'
  })
}

const handleAppleLogin = () => {
  uni.showToast({
    title: 'Apple ID登录功能开发中',
    icon: 'none'
  })
}

// 游客体验
const handleGuestLogin = () => {
  uni.showToast({
    title: '进入游客模式',
    icon: 'success'
  })

  setTimeout(() => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }, 1000)
}

// 忘记密码
const handleForgotPassword = () => {
  uni.showModal({
    title: '重置密码',
    content: '请联系客服重置密码，或通过注册邮箱找回',
    confirmText: '知道了'
  })
}

// 打开协议页面
const openTerms = () => {
  uni.showModal({
    title: '用户协议',
    content: '用户协议内容...',
    confirmText: '同意'
  })
}

const openPrivacy = () => {
  uni.showModal({
    title: '隐私政策',
    content: '隐私政策内容...',
    confirmText: '同意'
  })
}

const openHelp = () => {
  uni.showToast({
    title: '帮助中心功能开发中',
    icon: 'none'
  })
}

const openContact = () => {
  uni.showToast({
    title: '联系我们功能开发中',
    icon: 'none'
  })
}

// 欢迎动画
const showWelcomeAnimation = () => {
  showWelcome.value = true
  progress.value = 0

  const timer = setInterval(() => {
    progress.value += 5
    if (progress.value >= 100) {
      clearInterval(timer)
      setTimeout(() => {
        showWelcome.value = false
      }, 500)
    }
  }, 50)
}
</script>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.bg-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.floating-shapes {
  position: absolute;
  width: 100%;
  height: 100%;

  .shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 8s ease-in-out infinite;

    &.shape-1 {
      width: 80px;
      height: 80px;
      top: 10%;
      left: -20px;
      animation-delay: -1s;
    }

    &.shape-2 {
      width: 120px;
      height: 120px;
      top: 20%;
      right: -30px;
      animation-delay: -3s;
    }

    &.shape-3 {
      width: 60px;
      height: 60px;
      top: 60%;
      left: -15px;
      animation-delay: -5s;
    }

    &.shape-4 {
      width: 100px;
      height: 100px;
      top: 70%;
      right: -25px;
      animation-delay: -2s;
    }

    &.shape-5 {
      width: 90px;
      height: 90px;
      top: 40%;
      right: -20px;
      animation-delay: -4s;
    }
  }
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.8) 0%, rgba(118, 75, 162, 0.8) 100%);
}

.content-scroll {
  height: 100vh;
  position: relative;
  z-index: 1;
}

.login-content {
  padding: 60rpx 40rpx 40rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.app-branding {
  text-align: center;
  margin-bottom: 60rpx;

  .logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: 30rpx;

    .app-logo {
      width: 120rpx;
      height: 120rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 60rpx;
      color: white;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      animation: logoRotate 10s linear infinite;
    }

    .logo-rings {
      position: absolute;
      top: -20rpx;
      left: -20rpx;
      width: 160rpx;
      height: 160rpx;

      .ring {
        position: absolute;
        border: 2rpx solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        animation: ringPulse 3s ease-in-out infinite;

        &.ring-1 {
          width: 160rpx;
          height: 160rpx;
          animation-delay: 0s;
        }

        &.ring-2 {
          width: 160rpx;
          height: 160rpx;
          animation-delay: 1.5s;
        }
      }
    }
  }

  .app-title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: white;
    margin-bottom: 16rpx;
    text-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
  }

  .app-subtitle {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.8);
  }
}

.login-form-section {
  background: white;
  border-radius: 48rpx;
  padding: 48rpx;
  margin-bottom: 48rpx;
  box-shadow: 0 40rpx 50rpx -12rpx rgba(0, 0, 0, 0.1), 0 16rpx 24rpx -16rpx rgba(0, 0, 0, 0.1);
}

.auth-tabs {
  position: relative;
  background: #f1f5f9;
  border-radius: 16rpx;
  padding: 8rpx;
  margin-bottom: 48rpx;
  display: flex;

  .auth-tab {
    flex: 1;
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    padding: 24rpx;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #64748b;

    &.active {
      color: #1e293b;
      font-weight: 600;
    }
  }

  .tab-indicator {
    position: absolute;
    bottom: 8rpx;
    left: 8rpx;
    width: calc(50% - 8rpx);
    height: calc(100% - 16rpx);
    background: white;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx 0 rgba(0, 0, 0, 0.05);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    &.move-right {
      transform: translateX(100%);
    }
  }
}

.auth-form {
  .form-group {
    margin-bottom: 32rpx;
  }
}

.input-wrapper {
  position: relative;

  .input-icon {
    position: absolute;
    left: 32rpx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 32rpx;
    color: #94a3b8;
  }

  .form-input {
    width: 100%;
    padding: 32rpx 32rpx 32rpx 96rpx;
    border: 4rpx solid #e2e8f0;
    border-radius: 16rpx;
    font-size: 32rpx;
    background: white;
    color: #1e293b;
  }

  .password-toggle {
    position: absolute;
    right: 32rpx;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border: none;
    padding: 8rpx;
    border-radius: 8rpx;
    font-size: 32rpx;
    color: #94a3b8;
  }

  .input-focus-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4rpx;
    width: 0;
    border-radius: 2rpx;
    background: linear-gradient(135deg, #818cf8 0%, #a855f7 100%);
    transition: width 0.3s ease;
  }

  &.focused {
    .form-input {
      border-color: #818cf8;
      box-shadow: 0 0 0 6rpx rgba(129, 140, 248, 0.1);
    }

    .input-focus-line {
      width: 100%;
    }
  }
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48rpx;

  .remember-me,
  .agree-terms {
    display: flex;
    align-items: center;

    .checkbox {
      width: 36rpx;
      height: 36rpx;
      border: 4rpx solid #e2e8f0;
      border-radius: 8rpx;
      margin-right: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: white;

      &.checked {
        background: #818cf8;
        border-color: #818cf8;

        .checkmark {
          color: white;
          font-size: 24rpx;
          font-weight: bold;
        }
      }
    }

    .label-text {
      font-size: 28rpx;
      color: #64748b;

      .link-text {
        color: #818cf8;
      }
    }
  }

  .forgot-password {
    font-size: 28rpx;
    color: #818cf8;
  }
}

.auth-button {
  position: relative;
  width: 100%;
  padding: 32rpx;
  background: linear-gradient(135deg, #818cf8 0%, #a855f7 100%);
  border: none;
  border-radius: 16rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: white;
  box-shadow: 0 20rpx 50rpx -12rpx rgba(0, 0, 0, 0.1), 0 8rpx 20rpx -16rpx rgba(0, 0, 0, 0.1);

  .button-text {
    opacity: 1;
  }

  .button-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;

    .spinner {
      width: 40rpx;
      height: 40rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
  }

  &.loading {
    .button-text {
      opacity: 0;
    }

    .button-loader {
      opacity: 1;
    }
  }
}

.divider {
  position: relative;
  text-align: center;
  margin: 48rpx 0;

  text {
    background: white;
    padding: 0 32rpx;
    font-size: 28rpx;
    color: #94a3b8;
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2rpx;
    background: rgba(255, 255, 255, 0.2);
  }
}

.social-login {
  display: flex;
  gap: 24rpx;
  margin-bottom: 48rpx;

  .social-button {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16rpx;
    padding: 24rpx;
    background: white;
    border: none;
    border-radius: 16rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #1e293b;
    box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 0, 0, 0.1), 0 4rpx 8rpx -4rpx rgba(0, 0, 0, 0.1);

    .social-icon {
      display: flex;
      width: 32rpx;
      height: 32rpx;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
    }

    &.wechat .social-icon {
      color: #07c160;
    }

    &.qq .social-icon {
      color: #12b7f5;
    }

    &.apple .social-icon {
      color: #000000;
    }
  }
}

.quick-actions {
  margin-bottom: 48rpx;

  .quick-experience {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16rpx;
    padding: 24rpx 40rpx;
    border: 4rpx dashed rgba(255, 255, 255, 0.5);
    border-radius: 16rpx;
    background: transparent;
    color: white;
    font-size: 32rpx;
    font-weight: 500;

    .iconfont {
      font-size: 32rpx;
    }
  }
}

.auth-footer {
  text-align: center;
  margin-top: auto;
  padding-top: 48rpx;

  .version-info {
    display: block;
    margin-bottom: 16rpx;
    opacity: 0.7;
    color: white;
    font-size: 24rpx;
  }

  .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16rpx;

    .link-text {
      color: rgba(255, 255, 255, 0.8);
      font-size: 24rpx;
    }

    .separator {
      color: rgba(255, 255, 255, 0.5);
      font-size: 24rpx;
    }
  }
}

.welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  .welcome-content {
    text-align: center;

    .welcome-logo {
      width: 160rpx;
      height: 160rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 48rpx;
      font-size: 80rpx;
      color: white;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      animation: welcomePulse 2s ease-in-out infinite;
    }

    .welcome-title {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      color: white;
      margin-bottom: 16rpx;
    }

    .welcome-subtitle {
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 64rpx;
    }

    .welcome-progress {
      width: 480rpx;

      .progress-bar {
        height: 8rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 4rpx;
        overflow: hidden;
        margin-bottom: 16rpx;

        .progress-fill {
          height: 100%;
          background: white;
          border-radius: 4rpx;
          transition: width 0.3s ease;
        }
      }

      .progress-text {
        color: white;
        font-size: 28rpx;
      }
    }
  }
}

// 动画定义
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.6;
  }

  33% {
    transform: translateY(-60rpx) rotate(120deg);
    opacity: 0.8;
  }

  66% {
    transform: translateY(30rpx) rotate(240deg);
    opacity: 0.4;
  }
}

@keyframes logoRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes ringPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes welcomePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}
</style>